<template>
    <div>
        <el-card class="box-card" shadow="never">
            <el-form ref="form" class="edit-el-form"  :model="form" :rules="rules" label-width="auto">
                <el-form-item label="伤残人员" prop="type1">
                    <el-table
                          :data="hurt_type_table"
                          :span-method="objectSpanMethod"
                          border
                          class="yx_table"
                          style="width: 60%;">
                          <el-table-column
                            prop="hurt_level"
                            label="伤残等级"
                            width="180">
                          </el-table-column>
                          <el-table-column
                            prop="hurt_for"
                            label="伤残性质">
                          </el-table-column>
                          <el-table-column
                            prop="form_name"
                            label="抚恤金标准/月">
                              <template slot-scope="scope">
                                 <el-input v-model="form[`${scope.row.form_name}`]">
                                  <template slot="append">元</template>
                                 </el-input>
                              </template>
                          </el-table-column>
                        </el-table>
                </el-form-item>
                <el-form-item label="解放战争时期在乡老复员军人" prop="type2">
                    <el-input v-model="form.type2" required style="width: 60%;">
                      <template slot="append">元</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="解放战争时期在乡老复员军人" prop="type3">
                    <el-input v-model="form.type3" required style="width: 60%;">
                      <template slot="append">元</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="带病回乡退伍军人" prop="type4">
                    <el-input v-model="form.type4" required style="width: 60%;">
                      <template slot="append">元</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="两参人员" prop="type5">
                    <el-input v-model="form.type5" required style="width: 60%;">
                      <template slot="append">元</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="60周岁烈士子女" prop="type6">
                    <el-input v-model="form.type6" required style="width: 60%;">
                      <template slot="append">元</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="60周岁退役士兵" prop="type7">
                    <el-input v-model="form.type7" required style="width: 60%;">
                      <template slot="append">元</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="烈属" prop="type8">
                    <el-input v-model="form.type8" required style="width: 60%;">
                      <template slot="append">元</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="因公牺牲军人遗属" prop="type9">
                    <el-input v-model="form.type9" required style="width: 60%;">
                      <template slot="append">元</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="病故军人遗属" prop="type10">
                    <el-input v-model="form.type10" required style="width: 60%;">
                      <template slot="append">元</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="无军籍退休退职职工" prop="type11">
                    <el-input v-model="form.type11" required style="width: 60%;">
                      <template slot="append">元</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="无军籍遗属" prop="type12">
                    <el-input v-model="form.type12" required style="width: 60%;">
                      <template slot="append">元</template>
                    </el-input>
                </el-form-item>

                <!--查看不展示按钮-->
                <el-form-item v-if="edit_type!=0">
                    <el-button type="primary" @click="submitForm('form')" :loading="loading">{{button_name}}</el-button>
                    <el-button @click="back">取消</el-button>
                </el-form-item>
            </el-form>
        </el-card>

    </div>
</template>

<script>
    import { getExtendStandardInfo,editExtendStandard } from '@/api/extendstandard.js'
    export default {
        name:'ExtendStandard',
        inject:['reload'],
        data() {
            return {
                form: {
                  type2:'',
                  type3:'',
                  type4:'',
                  type5:'',
                  type6:'',
                  type7:'',
                  type8:'',
                  type9:'',
                  type10:'',
                  type11:'',
                  type12:'',
                  type111:'',
                  type112:'',
                  type113:'',
                  type121:'',
                  type122:'',
                  type123:'',
                  type131:'',
                  type132:'',
                  type133:'',
                  type141:'',
                  type142:'',
                  type143:'',
                  type151:'',
                  type152:'',
                  type153:'',
                  type161:'',
                  type162:'',
                  type163:'',
                  type171:'',
                  type172:'',
                  type181:'',
                  type182:'',
                  type191:'',
                  type192:'',
                  type1101:'',
                  type1102:'',
                },
                //校验规则
                rules:{
                    type2: [
                        { required:true , message:'请输入解放战争时期在乡老复员军人抚恤金额标准',trigger:'blur' },
                    ],
                    type3: [
                        { required:true , message:'请输入解放战争时期在乡老复员军人抚恤金额标准',trigger:'blur' }
                    ],
                    type4: [
                        { required:true , message:'请输入带病回乡退伍军人抚恤金额标准',trigger:'blur' }
                    ],
                    type5: [
                        { required:true , message:'请输入两参人员抚恤金额标准',trigger:'blur' }
                    ],
                    type6: [
                        { required:true , message:'请输入60周岁烈士子女抚恤金额标准',trigger:'blur' }
                    ],
                    type7: [
                        { required:true , message:'请输入60周岁退役士兵抚恤金额标准',trigger:'blur' }
                    ],
                    type8: [
                        { required:true , message:'请输入烈属抚恤金额标准',trigger:'blur' }
                    ],
                    type9: [
                        { required:true , message:'请输入因公牺牲军人遗属抚恤金额标准',trigger:'blur' }
                    ],
                    type10: [
                        { required:true , message:'请输入病故军人遗属抚恤金额标准',trigger:'blur' }
                    ],
                    type11: [
                        { required:true , message:'请输入无军籍退休退职职工抚恤金额标准',trigger:'blur' }
                    ],
                    type12: [
                        { required:true , message:'请输入无军籍遗属抚恤金额标准',trigger:'blur' }
                    ],
                },
                //加载组件
                loading: false,
                button_name:'立即提交',
                checked_keys : [],
                content:'金额发放',
                allchildtype:this.$store.state.allchildtype,
                hurt_type_table:[],
            }
        },
        methods: {
            submitForm(formName){
                let that = this;
                    this.$refs[formName].validate((valid) => {
                            if (valid) {
                                //判断伤残人员是否全部输入到
                                let float_reg=/^([0-9]{1,}[.][0-9]*)$/;
                                let int_reg=/^([0-9]{1,})$/;
                                for(let i in this.form){
                                   if(!float_reg.test(this.form[i]) && !int_reg.test(this.form[i])){
                                      this.$message.error('金额请输入数字，请检查');
                                      return;
                                   }
                                   if(this.form[i]>100000){
                                      this.$message.error('金额不能超过10万元');
                                      return;
                                   }
                                   if(this.form[i]=='' && this.form[i]!=0){
                                       this.$message.error('请完整输入伤残人员抚恤金额标准');
                                       return;
                                   }
                                }
                                this.loading=true;
                                this.button_name='正在提交';
                                var send_data={};
                                for(let i in this.form){
                                   send_data[i]=this.form[i];
                                }
                                editExtendStandard(send_data).then(function(response){
                                    let code=response.data.code;
                                    let type=code==1?'success':'error';
                                    that.$message({
                                        message:response.data.msg,
                                        type:type,
                                        onClose:function(e){
                                            that.loading=false;
                                            if(code==1){
                                               that.reload();
                                            }else{
                                               that.button_name='立即提交';
                                            }
                                        }
                                    });
                                })
                            }else{
                                setTimeout(()=>{
                                  const is_error=document.getElementsByClassName('is-error');
                                  is_error[0].querySelector('input').focus();
                                },100);
                                return false;
                            }
                    })
            },
            back(){
                this.$router.go(-1);
            },
            objectSpanMethod({row,column,rowIndex,columnIndex}) {
                    if (columnIndex === 0) {
                      if (rowIndex % 3 === 0 && rowIndex<=17) {
                        return {
                          rowspan: 3,
                          colspan: 1
                        };
                      } else if(rowIndex%2 === 0 && rowIndex>17){
                        return {
                          rowspan: 2,
                          colspan: 1
                        };
                      }else{
                        return {
                          rowspan: 0,
                          colspan: 0
                        };
                      }
                }
           }
        },
        created(){
            let allchildtype=this.allchildtype;
            //组装成表格
            let table_data=[];
            for(let i in allchildtype){
                for(let j in allchildtype[i]['children']){
                   let row_obj={};
                   row_obj.hurt_level=allchildtype[i]['label'];
                   row_obj.hurt_for=allchildtype[i]['children'][j]['label'];
                   row_obj.form_name=allchildtype[i]['children'][j]['name']
                   table_data.push(row_obj);
                }
            }
            this.hurt_type_table=table_data;
            let that=this;
            getExtendStandardInfo().then(function(response){
                if(response.data.code==1){
                    that.form.type2=response.data.info.type2;
                    that.form.type3=response.data.info.type3;
                    that.form.type4=response.data.info.type4;
                    that.form.type5=response.data.info.type5;
                    that.form.type6=response.data.info.type6;
                    that.form.type7=response.data.info.type7;
                    that.form.type8=response.data.info.type8;
                    that.form.type9=response.data.info.type9;
                    that.form.type10=response.data.info.type10;
                    that.form.type11=response.data.info.type11;
                    that.form.type12=response.data.info.type12;
                    for(let i in response.data.info.type1_arr){
                        for(let j in that.form){
                            if(i==j){
                                that.form[j]=response.data.info.type1_arr[i];
                            }
                        }
                    }
                }
            })
        },
        computed:{
            edit_type(){
                return this.$route.params.edit_type;
            }
        }
    }
</script>

<style>
    .edit-el-form{
        margin-top:30px;
    }
</style>
